<template>
    <div class="modalDemoIndex">
        <div class="autor-demo">
            <div>作者：陈炼</div>
            <div>日期：2017/11/02</div>
        </div>
        <Menu mode="horizontal" active-name="1" @on-select="changeMenu">
            <MenuItem name="dateModal">
                <Icon type="ios-paper"></Icon>周期模态框
            </MenuItem>
            <MenuItem name="confirmModal">
                <Icon type="ios-paper"></Icon>显示模态框
            </MenuItem>
            <MenuItem name="postModal">
                <Icon type="ios-paper"></Icon>发货模态框
            </MenuItem>
            <MenuItem name="radioModal">
                <Icon type="ios-paper"></Icon>单选式弹窗
            </MenuItem>
            <MenuItem name="payInModal">
                <Icon type="ios-paper"></Icon>启用账号弹窗
            </MenuItem>
            <MenuItem name="addPostModal">
                <Icon type="ios-paper"></Icon>添加岗位弹窗
            </MenuItem>
            <MenuItem name="editPostModal">
                <Icon type="ios-paper"></Icon>编辑岗位弹窗
            </MenuItem>
            <MenuItem name="addUserModal">
                <Icon type="ios-paper"></Icon>添加角色弹窗
            </MenuItem>
            <MenuItem name="adviceModal">
                <Icon type="ios-paper"></Icon>维保方案弹窗
            </MenuItem>
            <MenuItem name="addAdviceModal">
                <Icon type="ios-paper"></Icon>添加维保方案弹窗
            </MenuItem>
        </Menu>
        <h5>以下相关样式请自行取用</h5>

        <!--添加维保方案弹窗-->
        <div v-show="selected == 'addAdviceModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-add-project"
                title="添加维保方案"
                subtitle="(车牌号:湘A5678Q)"
                :showModal="showModal"
                modalWidth="600"
                modalHeight="400"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <div class="zlst-margin-top-10px infoArea">
                    <div class="font14">
                        <label class="rRtar">保养项目</label>
                        <input type="text" style="width:300px"/>
                    </div>
                    <div class="font14 zlst-margin-top-10px">
                        <label class="rRtar">配件名称</label>
                        <input type="text" style="width:300px"/>
                    </div>
                    <div class="font14 zlst-margin-top-10px">
                        <label class="rRtar">配件品牌</label>
                        <input type="text" style="width:300px"/>
                    </div>
                    <div class="font14 zlst-margin-top-10px">
                        <label class="rRtar">配件型号</label>
                        <input type="text" style="width:300px"/>
                    </div>
                    <div class="font14 zlst-margin-top-10px">
                        <label class="rRtar">收费标准</label>
                        <input type="text" style="width:200px" placeholder="单价(元)" />
                        <input type="text" style="width:100px" placeholder="单位" />
                        <input type="text" style="width:100px" placeholder="数量" />
                    </div>
                    <div class="font14 zlst-margin-top-10px">
                        <label class="rRtar">实际收费</label>
                        <input type="text" style="width:200px" placeholder="材料费(元)" />
                        <input type="text" style="width:215px" placeholder="工时费(元)"/>
                    </div>
                </div>
                <div class="footer-contral">
                    <Checkbox>继续添加</Checkbox>
                </div>
            </modal-confirm>
            <Button class="zlst-margin-top-20px" type="warning" @click="getModal">添加维保方案弹窗</Button>
            <img class="img" src="../../../../../src/assets/images/modal10.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
              <code class="html" v-text="htmlCode9">
              </code>
          </pre>
        </div>
        <!--维保方案弹窗-->
        <div v-show="selected == 'adviceModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-project"
                title="维保方案弹窗"
                subtitle="(车牌号:湘A5678Q)"
                :showModal="showModal"
                modalWidth="1000"
                modalHeight="560"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <div class="project-left">
                    <div class="project-left-list">
                        <div class="lineClass" v-for="i in [1,2,3,4,5,6,7,8,9]">
                            维保方案{{i}}
                        </div>
                    </div>
                </div>
                <div class="project-right">
                    <Table ref="selection" stripe :columns="columns1" :data="data1"></Table>
                </div>
                <div class="project-right-title">
                    <span class="title-name">维保项目</span>
                    <span class="choose-num">已选三个</span>
                </div>
            </modal-confirm>
            <Button class="zlst-margin-top-20px" type="warning" @click="getModal">维保方案弹窗</Button>
            <img class="img" src="../../../../../src/assets/images/modal9.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
          <code class="html" v-text="htmlCode8">
          </code>

      </pre>
        </div>
        <!--添加角色弹窗-->
        <div v-show="selected == 'addUserModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-add-role"
                title="添加角色"
                subtitle="(baoyi3)"
                :showModal="showModal"
                modalWidth="729"
                modalHeight="700"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <Table ref="selection" stripe :columns="columns" :data="data"></Table>
                <div class="choose-num">已选2个</div>
            </modal-confirm>
            <Button class="zlst-margin-top-20px" type="warning" @click="getModal">添加角色弹窗</Button>
            <img class="img" src="../../../../../src/assets/images/modal8.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
          <code class="html" v-text="htmlCode7">
          </code>

      </pre>
        </div>
        <!--编辑岗位弹窗-->
        <div v-show="selected == 'editPostModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-edit-post"
                title="编辑岗位"
                :showModal="showModal"
                modalWidth="684"
                modalHeight="423"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <div class="infoArea">
                    <div class="zlst-margin-top-10px">
                        <label class="fontClass">岗位名称</label>
                        <Select style="width:519px" clearable>
                            <Option value="1">交互工程师</Option>
                            <Option value="2">测试工程师</Option>
                            <Option value="3">开发工程师</Option>
                        </Select>
                    </div>
                    <div class="zlst-margin-top-10px">
                        <label class="fontClass">岗位描述</label>
                    </div>
                    <div class="zlst-margin-top-10px">
                        <textarea class="textarea-size"></textarea>
                    </div>
                </div>
            </modal-confirm>
            <Button style="margin-top: 20px" type="warning" @click="getModal">编辑岗位弹窗</Button>
            <img class="img" src="../../../../../src/assets/images/modal7.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
          <code class="html" v-text="htmlCode6">
          </code>

      </pre>
        </div>
        <!--添加岗位弹窗-->
        <div v-show="selected == 'addPostModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-add-post"
                title="添加岗位"
                :showModal="showModal"
                modalWidth="527"
                modalHeight="363"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <div class="infoArea">
                    <div class="headerShow">
                        <div class="post-name floatL fontClass">岗位名称</div>
                        <div class="fontClass">岗位描述</div>
                    </div>
                    <div class="zlst-margin-top-10px" v-for="i in [1,2 ]">
                        <div class="post-name-input floatL fontClass">
                            <input style="width:112px;" type="text" name="" placeholder="输入岗位名称">
                        </div>
                        <div class="fontClass">
                            <input style="width:292px;" type="text" name="" placeholder="输入关键字">
                            <span class="plus-btn">+</span>
                            <span class="minus-btn">-</span>
                        </div>
                    </div>
                </div>
            </modal-confirm>
            <Button style="margin-top: 20px" type="warning" @click="getModal">添加岗位弹窗</Button>
            <img class="img" src="../../../../../src/assets/images/modal6.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
          <code class="html" v-text="htmlCode5">
          </code>

      </pre>
        </div>
        <!--启用账号弹窗-->
        <div v-show="selected == 'payInModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-use-account"
                title="启用账号"
                :showModal="showModal"
                modalWidth="527"
                modalHeight="363"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <div class="infoArea">
                    <div class="fontClass">确认启用该账户的用户？</div>
                    <div class="zlst-margin-top-10px"><Checkbox>备注</Checkbox></div>
                    <div class="zlst-margin-top-10px"><textarea placeholder="输入备注（选填）" class="textarea-size" ></textarea></div>
                    <div><Checkbox>开通周期</Checkbox></div>
                    <div class="zlst-margin-top-10px">
                        <label class="fontClass">开始时间</label>
                        <DatePicker
                            type="date"
                            placeholder="选择日期"
                            style="width: 247px"></DatePicker>
                    </div>
                    <div class="zlst-margin-top-10px">
                        <label class="fontClass">结束时间</label>
                        <DatePicker
                            type="date"
                            placeholder="选择日期"
                            style="width: 247px"></DatePicker>
                    </div>
                </div>
            </modal-confirm>
            <Button style="margin-top: 20px" type="warning" @click="getModal">启用账号弹窗</Button>
            <img class="img" src="../../../../../src/assets/images/modal5.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
          <code class="html" v-text="htmlCode4">
          </code>

      </pre>
        </div>
        <!--单选式弹窗-->
        <div v-show="selected == 'radioModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-radio"
                title="解锁" hideClose
                :showModal="showModal"
                modalWidth="340"
                modalHeight="230"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <RadioGroup v-model="vertical" vertical>
                    <Radio label="1">
                        <span>仅解锁</span>
                    </Radio>
                    <Radio label="2">
                        <span>仅重置密码</span>
                    </Radio>
                    <Radio label="3">
                        <span>解锁且重置密码</span>
                    </Radio>
                </RadioGroup>
                <div>确定执行上述操作？</div>
            </modal-confirm>
            <Button style="margin-top: 20px" type="warning" @click="getModal">单选模态框</Button>
            <img class="img" src="../../../../../src/assets/images/modal4.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
        <code class="html" v-text="htmlCode3">
        </code>

    </pre>
        </div>
        <!--发货弹窗-->
        <div v-show="selected == 'postModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-delivery"
                title="发货"
                :showModal="showModal"
                modalWidth="450"
                modalHeight="330"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <div class="zlst-margin-top-10px infoArea">
                    <div class="font14">
                        <label class="getR">发货时间</label>
                        <DatePicker type="date" placeholder="选择日期" style="width: 300px"></DatePicker>
                    </div>
                    <div class="font14 zlst-margin-top-10px">
                        <label class="getR">发货单位</label>
                        <input type="text" style="width:300px"/>
                    </div>
                    <div class="font14 zlst-margin-top-10px">
                        <label class="getR">收货单位</label>
                        <input type="text" style="width:300px"/>
                    </div>
                    <div class="font14 zlst-margin-top-10px">
                        <label class="nGetR verticalT" >备　　注</label>
                        <textarea placeholder="选填" style="width:300px"></textarea>
                    </div>
                </div>
            </modal-confirm>
            <Button style="margin-top: 20px" type="warning" @click="getModal">发货模态框</Button>
            <img class="img" src="../../../../../src/assets/images/modal3.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
        <code class="html" v-text="htmlCode2">
        </code>

    </pre>
        </div>
        <!--显示弹窗-->
        <div v-show="selected == 'confirmModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-reset-password"
                title="重设密码"
                :showModal="showModal"
                modalWidth="250"
                hideClose
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <div>
                    是否确认以上操作？
                </div>
            </modal-confirm>
            <Button class="zlst-margin-top-20px" type="warning" @click="getModal">提示显示模态框</Button>
            <img class="img" src="../../../../../src/assets/images/modal2.png">
            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
        <code class="html" v-text="htmlCode1">
        </code>

    </pre>
        </div>
        <!--周期弹窗-->
        <div v-show="selected == 'dateModal'">
            <modal-confirm
                class="zlst-modal zlst-modal-cycle"
                title="重设开通周期"
                :showModal="showModal"
                modalWidth="300"
                modalHeight="190"
                @on-ok-modal="okModal"
                @on-cancel-modal="cancelModal">
                <div>
                    <DatePicker type="date"
                                v-model="firstDate"
                                placeholder="选择日期"
                                style="width: 247px"></DatePicker>
                    <DatePicker class = "zlst-margin-top-10px"
                                type="date"
                                v-model="secondDate"
                                placeholder="选择日期"
                                style="width: 247px"></DatePicker>
                </div>
            </modal-confirm>

            <Button style="margin-top: 20px" type="warning" @click="getModal">重设开通周期模态框</Button>
            <img class="img" src="../../../../../src/assets/images/modal1.png">
            <h3 style="margin-top: 50px">JavaScript代码</h3>
            <!-- 显示JavaScript代码 -->
            <pre>
            <code class="javascript">
               export default {

                    data: function(){
                      return {
                        showModal: false,
                        firstDate:'',
                        secondDate:''
                      };
                    },

                    methods :{
                      okModal: function() {
                        var that = this;
                        console.log("firstDate: ", this.firstDate);
                        console.log("secondDate: ", this.secondDate);
                        that.showModal = false;
                      },

                      cancelModal: function() {
                        var that = this;
                        that.showModal = false;
                      },

                      getModal: function() {
                        var that = this;
                        that.showModal = true;
                      }
                    },

                    mounted: function(){

                    },


                  }
            </code>
        </pre>

            <h3>HTML代码</h3>
            <!-- 显示HTML代码 -->
            <pre>
            <code class="html" v-text="htmlCode">
            </code>

        </pre>


        </div>
        <div class="anchor">
            <!---->
            <!---->
            <h3 id="Select_props">props</h3>
            <!---->
            <!---->
            <!---->
        </div>
        <table>
            <thead>
            <tr>
                <th>属性</th>
                <th>说明</th>
                <th>类型</th>
                <th>默认值</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>title</td>
                <td>模态框标题</td>
                <td>String</td>
                <td>空</td>
            </tr>
            <tr>
                <td>subtitle</td>
                <td>模态框副标题</td>
                <td>String</td>
                <td>空</td>
            </tr>
            <tr>
                <td>showModal</td>
                <td>打开关闭modal</td>
                <td>Boolean</td>
                <td>false</td>
            </tr>
            <tr>
                <td>modalWidth </td>
                <td>模态框宽度</td>
                <td>Number</td>
                <td>最小宽度200</td>
            </tr>
            <tr>
                <td>modalHeight </td>
                <td>模态框高度</td>
                <td>Number</td>
                <td>最小高度100</td>
            </tr>
            <tr>
                <td>hideClose </td>
                <td>true：隐藏关闭按钮，false：显示关闭按钮</td>
                <td>Boolean</td>
                <td>false</td>
            </tr>

            </tbody>
        </table>

        <div class="anchor">
            <!---->
            <!---->
            <h3>events</h3>
            <!---->
            <!---->
            <!---->
        </div>
        <table>
            <thead>
            <tr>
                <th>事件名</th>
                <th>说明</th>
                <th>返回值</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>on-ok-modal</td>
                <td>确定按钮事件</td>
                <td>无</td>
            </tr>
            <tr>
                <td>on-cancel-modal</td>
                <td>取消事件按钮</td>
                <td>无</td>
            </tr>
            </tbody>
        </table>

    </div>
</template>


<script>
    import hljs from 'highlight.js'
    export default {

        data: function(){
            return {
                columns1: [
                    {
                    type: 'selection',
                    width: 60,
                    align: 'right'
                },
                    {
                        title: '维保项目',
                        key: 'name',
                        align: 'left'
                    },
                    {
                        title: '配件名称',
                        key: 'name',
                        align: 'left'
                    },
                    {
                        title: '品牌',
                        key: 'name',
                        align: 'left'
                    },
                    {
                        title: '型号',
                        key: 'name',
                        align: 'left'
                    },
                    {
                        title: '单价(元)',
                        key: 'name',
                        align: 'left'
                    }],
                data1:[
                    {
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                },{
                    name:'我们不一样'
                }],
                columns: [
                    {
                    type: 'selection',
                    width: 60,
                    align: 'right'
                },
                    {
                        title: '角色列表',
                        key: 'name',
                        align: 'left'
                    }],
                data:[
                    {
                    name:'角色分析师'
                },{
                    name:'用户分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                },{
                    name:'角色分析师'
                }],
                vertical: '2',
                selected:'dateModal',
                showModal: false,
                firstDate:'',
                secondDate:'',
                htmlCode:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-cycle"\n' +
                '                title="重设开通周期"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="300"\n' +
                '                modalHeight="190"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <div>\n' +
                '                    <DatePicker type="date"\n' +
                '                                v-model="firstDate"\n' +
                '                                placeholder="选择日期"\n' +
                '                                style="width: 247px"></DatePicker>\n' +
                '                    <DatePicker class = "zlst-margin-top-10px"\n' +
                '                                type="date"\n' +
                '                                v-model="secondDate"\n' +
                '                                placeholder="选择日期"\n' +
                '                                style="width: 247px"></DatePicker>\n' +
                '                </div>\n' +
                '            </modal-confirm>',
                htmlCode1:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-reset-password"\n' +
                '                title="重设密码"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="250"\n' +
                '                hideClose\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <div>\n' +
                '                    是否确认以上操作？\n' +
                '                </div>\n' +
                '            </modal-confirm>',
                htmlCode2:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-delivery"\n' +
                '                title="发货"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="450"\n' +
                '                modalHeight="330"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <div class="zlst-margin-top-10px infoArea">\n' +
                '                    <div class="font14">\n' +
                '                        <label class="getR">发货时间</label>\n' +
                '                        <DatePicker type="date" placeholder="选择日期" style="width: 300px"></DatePicker>\n' +
                '                    </div>\n' +
                '                    <div class="font14 zlst-margin-top-10px">\n' +
                '                        <label class="getR">发货单位</label>\n' +
                '                        <input type="text" style="width:300px"/>\n' +
                '                    </div>\n' +
                '                    <div class="font14 zlst-margin-top-10px">\n' +
                '                        <label class="getR">收货单位</label>\n' +
                '                        <input type="text" style="width:300px"/>\n' +
                '                    </div>\n' +
                '                    <div class="font14 zlst-margin-top-10px">\n' +
                '                        <label class="nGetR verticalT" >备　　注</label>\n' +
                '                        <textarea placeholder="选填" style="width:300px"></textarea>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </modal-confirm>',
                htmlCode3: '<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-radio"\n' +
                '                title="解锁" hideClose\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="340"\n' +
                '                modalHeight="230"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <RadioGroup v-model="vertical" vertical>\n' +
                '                    <Radio label="1">\n' +
                '                        <span>仅解锁</span>\n' +
                '                    </Radio>\n' +
                '                    <Radio label="2">\n' +
                '                        <span>仅重置密码</span>\n' +
                '                    </Radio>\n' +
                '                    <Radio label="3">\n' +
                '                        <span>解锁且重置密码</span>\n' +
                '                    </Radio>\n' +
                '                </RadioGroup>\n' +
                '                <div>确定执行上述操作？</div>\n' +
                '            </modal-confirm>',
                htmlCode4:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-use-account"\n' +
                '                title="启用账号"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="527"\n' +
                '                modalHeight="363"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <div class="infoArea">\n' +
                '                    <div class="fontClass">确认启用该账户的用户？</div>\n' +
                '                    <div class="zlst-margin-top-10px"><Checkbox>备注</Checkbox></div>\n' +
                '                    <div class="zlst-margin-top-10px"><textarea placeholder="输入备注（选填）" class="textarea-size" ></textarea></div>\n' +
                '                    <div><Checkbox>开通周期</Checkbox></div>\n' +
                '                    <div class="zlst-margin-top-10px">\n' +
                '                        <label class="fontClass">开始时间</label>\n' +
                '                        <DatePicker\n' +
                '                            type="date"\n' +
                '                            placeholder="选择日期"\n' +
                '                            style="width: 247px"></DatePicker>\n' +
                '                    </div>\n' +
                '                    <div class="zlst-margin-top-10px">\n' +
                '                        <label class="fontClass">结束时间</label>\n' +
                '                        <DatePicker\n' +
                '                            type="date"\n' +
                '                            placeholder="选择日期"\n' +
                '                            style="width: 247px"></DatePicker>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </modal-confirm>',
                htmlCode5:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-add-post"\n' +
                '                title="添加岗位"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="527"\n' +
                '                modalHeight="363"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <div class="infoArea">\n' +
                '                    <div class="headerShow">\n' +
                '                        <div class="post-name floatL fontClass">岗位名称</div>\n' +
                '                        <div class="fontClass">岗位描述</div>\n' +
                '                    </div>\n' +
                '                    <div class="zlst-margin-top-10px" v-for="i in [1,2 ]">\n' +
                '                        <div class="post-name-input floatL fontClass">\n' +
                '                            <input style="width:112px;" type="text" name="" placeholder="输入岗位名称">\n' +
                '                        </div>\n' +
                '                        <div class="fontClass">\n' +
                '                            <input style="width:292px;" type="text" name="" placeholder="输入关键字">\n' +
                '                            <span class="plus-btn">+</span>\n' +
                '                            <span class="minus-btn">-</span>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </modal-confirm>',
                htmlCode6:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-edit-post"\n' +
                '                title="编辑岗位"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="684"\n' +
                '                modalHeight="423"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <div class="infoArea">\n' +
                '                    <div class="zlst-margin-top-10px">\n' +
                '                        <label class="fontClass">岗位名称</label>\n' +
                '                        <Select style="width:519px" clearable>\n' +
                '                            <Option value="1">交互工程师</Option>\n' +
                '                            <Option value="2">测试工程师</Option>\n' +
                '                            <Option value="3">开发工程师</Option>\n' +
                '                        </Select>\n' +
                '                    </div>\n' +
                '                    <div class="zlst-margin-top-10px">\n' +
                '                        <label class="fontClass">岗位描述</label>\n' +
                '                    </div>\n' +
                '                    <div class="zlst-margin-top-10px">\n' +
                '                        <textarea class="textarea-size"></textarea>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '            </modal-confirm>',
                htmlCode7:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-add-role"\n' +
                '                title="添加角色"\n' +
                '                subtitle="(baoyi3)"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="729"\n' +
                '                modalHeight="700"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <Table ref="selection" stripe :columns="columns" :data="data"></Table>\n' +
                '                <div class="choose-num">已选2个</div>\n' +
                '            </modal-confirm>',
                htmlCode8:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-project"\n' +
                '                title="维保方案弹窗"\n' +
                '                subtitle="(车牌号:湘A5678Q)"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="1000"\n' +
                '                modalHeight="560"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <div class="project-left">\n' +
                '                    <div class="project-left-list">\n' +
                '                        <div class="lineClass" v-for="i in [1,2,3,4,5,6,7,8,9]">\n' +
                '                            维保方案{{i}}\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="project-right">\n' +
                '                    <Table ref="selection" stripe :columns="columns1" :data="data1"></Table>\n' +
                '                </div>\n' +
                '                <div class="project-right-title">\n' +
                '                    <span class="title-name">维保项目</span>\n' +
                '                    <span class="choose-num">已选三个</span>\n' +
                '                </div>\n' +
                '            </modal-confirm>',
                htmlCode9:'<modal-confirm\n' +
                '                class="zlst-modal zlst-modal-add-project"\n' +
                '                title="添加维保方案"\n' +
                '                subtitle="(车牌号:湘A5678Q)"\n' +
                '                :showModal="showModal"\n' +
                '                modalWidth="600"\n' +
                '                modalHeight="400"\n' +
                '                @on-ok-modal="okModal"\n' +
                '                @on-cancel-modal="cancelModal">\n' +
                '                <div class="zlst-margin-top-10px infoArea">\n' +
                '                    <div class="font14">\n' +
                '                        <label class="rRtar">保养项目</label>\n' +
                '                        <input type="text" style="width:300px"/>\n' +
                '                    </div>\n' +
                '                    <div class="font14 zlst-margin-top-10px">\n' +
                '                        <label class="rRtar">配件名称</label>\n' +
                '                        <input type="text" style="width:300px"/>\n' +
                '                    </div>\n' +
                '                    <div class="font14 zlst-margin-top-10px">\n' +
                '                        <label class="rRtar">配件品牌</label>\n' +
                '                        <input type="text" style="width:300px"/>\n' +
                '                    </div>\n' +
                '                    <div class="font14 zlst-margin-top-10px">\n' +
                '                        <label class="rRtar">配件型号</label>\n' +
                '                        <input type="text" style="width:300px"/>\n' +
                '                    </div>\n' +
                '                    <div class="font14 zlst-margin-top-10px">\n' +
                '                        <label class="rRtar">收费标准</label>\n' +
                '                        <input type="text" style="width:200px" placeholder="单价(元)" />\n' +
                '                        <input type="text" style="width:100px" placeholder="单位" />\n' +
                '                        <input type="text" style="width:100px" placeholder="数量" />\n' +
                '                    </div>\n' +
                '                    <div class="font14 zlst-margin-top-10px">\n' +
                '                        <label class="rRtar">实际收费</label>\n' +
                '                        <input type="text" style="width:200px" placeholder="材料费(元)" />\n' +
                '                        <input type="text" style="width:215px" placeholder="工时费(元)"/>\n' +
                '                    </div>\n' +
                '                </div>\n' +
                '                <div class="footer-contral">\n' +
                '                    <Checkbox>继续添加</Checkbox>\n' +
                '                </div>\n' +
                '            </modal-confirm>'
            };
        },

        methods :{
            okModal: function() {
                var that = this;
                console.log("firstDate: ", this.firstDate);
                console.log("secondDate: ", this.secondDate);
                that.showModal = false;
            },

            cancelModal: function() {
                var that = this;
                that.showModal = false;
            },

            getModal: function() {
                var that = this;
                that.showModal = true;
            },

            changeMenu: function (menuName){
                //切换菜单
                var that = this;
                that.selected = menuName;
            }

        },

        mounted: function () {
            window.setTimeout(function () {
                $('.modalDemoIndex pre code').each(function(i, block) {
                    hljs.highlightBlock(block);
                });
            }, 100);
        },

    }
</script>

<style scoped lang="scss">
    .modalDemoIndex {
        padding: 10px;
        table {
            font-family: Consolas,Menlo,Courier,monospace;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
            border: 1px solid #e9e9e9;
            width: 100%;
            margin-bottom: 24px;
        }

        table td, table th {
            border: 1px solid #e9e9e9;
            padding: 8px 16px;
            text-align: left;
        }

        table th {
            background: #f7f7f7;
            white-space: nowrap;
            color: #5c6b77;
            font-weight: 600;
        }
        img{
            display: block;
            margin: 10px 0;
        }
    }

</style>


